<template>
	<view>
		<uv-navbar :title="title" bg-color="#FFFFFF" :placeholder='true' leftIconSize="20px" leftIconColor="#313C56"
			:autoBack='true' titleStyle="font-size: 16px;font-weight: 500;color: #313c56;">
		</uv-navbar>
		<view class="" style="margin-left: 16px; margin-right: 16px;" :style="{height: scrollHeight + 'px'}">
			<!-- <uv-textarea ref="myTextArea" v-model="value" placeholder="请输入内容" maxlength="-1" border="none" :autoHeight="true" :textStyle="{fontSize: '16px'}"></uv-textarea> -->
			<textarea :style="{height: scrollHeight + 'px'}" ref="myTextArea" v-model="value" :focus="autoFocus"
				placeholder="请输入内容" maxlength="-1" @blur="blur" @focus="focus"></textarea>
		</view>
		<view class="flex-row flex-between" style="padding-top: 12px; margin-left: 20px; margin-right: 20px;"
			:style="{height: toolbarHeight + 'px'}">
			<view class="flex-row-center"
				style="border: 1px solid #EFF0F4; height: 44px; border-radius: 22px; width: calc(45%); color: #313C56;"
				@click="enter">
				换行
			</view>
			<view class="flex-row-center"
				style="background-color: #EB7520; height: 44px; border-radius: 22px; width: calc(45%); color: white;"
				@click="save">
				保存
			</view>
		</view>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				value: '',
				autoFocus: false,
			}
		},
		computed: {
			statusBarHeight() {
				const sys = uni.$uv.sys()
				return sys.statusBarHeight
			},
			navbarHeight() {
				return this.statusBarHeight + 44
			},
			screenWidth() {
				const sys = uni.$uv.sys()
				return sys.windowWidth
			},
			pageHeight() {
				const sys = uni.$uv.sys()
				return sys.windowHeight - this.navbarHeight
			},
			scrollHeight() {
				return this.pageHeight - this.toolbarHeight - 10
			},
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 68
			}
		},
		onLoad(info) {
			this.title = info.title
			if (!this.$uv.test.empty(info.value)) {
				this.value = info.value
			}
		},
		methods: {
			enter() {
				this.value = this.value + '\n'
				// this.autoFocus = false
				this.$nextTick(() => {
					this.autoFocus = true
				})

			},
			focus() {
				this.autoFocus = true
			},
			blur() {
				this.autoFocus = false
			},
			save() {
				if (this.value.length > 0) {
					uni.hideKeyboard()
					this.getOpenerEventChannel().emit('describeEdit', this.value)
					uni.navigateBack()
				}

			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}
</style>